<template>
	<view class="container">
		<view class="select_box">
			<u-cell-group>
				<u-cell title="开始时间" @click="showTimePicker('start')" :value="time.start" :isLink="true"
					arrow-direction="right"></u-cell>
				<u-cell title="结束时间" @click="showTimePicker('end')" :value="time.end" :isLink="true"
					arrow-direction="right"></u-cell>
			</u-cell-group>
			<u-datetime-picker :show="show" v-model="date" @confirm="onConfirm" @cancel="show=false"
				mode="datetime"></u-datetime-picker>
		</view>
		<view class="text_box">
			<text>请假事由</text>
			<textarea v-model="reason" placeholder="请输入请假事由"></textarea>
		</view>
		<button class="subimt" @click="submit">提交申请</button>
	</view>
</template>

<script>
	import {
		v4 as uuidv4
	} from 'uuid'
	import {
		mapState
	} from "vuex"
	import {
		postaskinfo
	} from "@/api/api.js"
	export default {
		data() {
			return {
				show: false,
				date: Number(new Date()),
				reason: '',
				time: {
					start: '选择开始时间',
					end: '选择结束时间'
				}
			}
		},
		computed: {
			...mapState(['loginState', 'userInfo'])
		},
		methods: {
			showTimePicker(type) {
				this.mode = 'datetime'
				this.show = true
				this.currentType = type
				this.pickerValue = type === 'start' ? this.time.start : this.time.end
			},
			onConfirm(val) {
				const timeFormat = uni.$u.timeFormat;
				if (this.currentType === 'start') {
					this.time.start = timeFormat(val.value, 'yyyy-mm-dd hh:MM')
				} else if (this.currentType === 'end') {
					this.time.end = timeFormat(val.value, 'yyyy-mm-dd hh:MM')
				}
				//console.log(val)
				this.show = false
			},
			submit() {
				if (this.date && this.reason) {
					if (this.loginState) {
						// 进行提交操作
						this.Handleaskinfo()
					} else {
						uni.showModal({
							title: '请先登录',
							success: function(res) {
								// console.log(res);
								if (res.confirm) { // 用户点击确定按钮
									uni.switchTab({
										url: '/pages/personal/personal'
									})
								}
							}
						});
					}
					this.clearData()
				} else {
					uni.showToast({
						title: '请输入完整信息',
						icon: 'none'
					})
				}
			},
			clearData() {
				this.time.start = '选择开始时间'
				this.time.end = '选择结束时间'
				this.reason = ''
			},

			Handleaskinfo() {
				const id = uuidv4();
				postaskinfo({
						id: id,
						employee_id: this.userInfo.employee_id,
						name: this.userInfo.name,
						start_time: this.time.start,
						end_time: this.time.start,
						reason: this.reason,
					})
					.then(response => {
						uni.showModal({
							title: '提交成功',
							showCancel: false
						});
					})
					.catch(error => {
						console.log(error);
						uni.showModal({
							title: '提交失败',
							showCancel: false
						});
					});
			}
		}
	}
</script>


<style lang="scss" scoped>
	.select_box {
		background-color: #ffffff;
		margin-bottom: 20upx;
	}

	.text_box {
		height: 400upx;
		background-color: #ffffff;
		border: none;
		padding: 20upx;

		text {
			font-size: 30upx;
			line-height: 60upx;
		}

		textarea {
			font-size: 26upx;
		}
	}

	button {
		position: fixed;
		left: 40upx;
		right: 40upx;
		bottom: 40upx;
		color: #ffffff;
		border-radius: 50upx;
		background-color: #20aaff;
	}
</style>